﻿<style>

    .bs-wizard {margin-top: 40px;}

    /*Form Wizard*/
    .bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
    .bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
    .bs-wizard > .bs-wizard-step + .bs-wizard-step {}
    .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
    .bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
    .bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
    .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
    .bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
    .bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
    .bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
    .bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
    .bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
    .bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
    .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
    .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
    .bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
    .bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
    .bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
    /*END Form Wizard*/

</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="box box-solid box-primary">
                <div class="box-header"><h3 class="box-title text-center">Criar novo evento</h3></div>
                <div class="box-body">
                    <div class="row">
<div class="col-sm-12">

    <div class="row bs-wizard" style="border-bottom:0;">

        <div class="col-xs-3 bs-wizard-step" ng-class="{active: etapa==0, complete: etapa>0}">
            <div class="text-center bs-wizard-stepnum">Passo 1</div>
            <div class="progress"><div class="progress-bar"></div></div>
            <a href="" class="bs-wizard-dot"></a>
            <div class="bs-wizard-info text-center">Cadastrar o evento</div>
        </div>

        <div class="col-xs-3 bs-wizard-step" ng-class="{active: etapa==1, complete: etapa>1, disabled:etapa<1}">
            <div class="text-center bs-wizard-stepnum">Passo 2</div>
            <div class="progress"><div class="progress-bar"></div></div>
            <a href="" class="bs-wizard-dot"></a>
            <div class="bs-wizard-info text-center">Vincular clientes ao evento</div>
        </div>

        <div class="col-xs-3 bs-wizard-step" ng-class="{active: etapa==2, complete: etapa>2, disabled:etapa<2}">
            <div class="text-center bs-wizard-stepnum">Passo 3</div>
            <div class="progress"><div class="progress-bar"></div></div>
            <a href="" class="bs-wizard-dot"></a>
            <div class="bs-wizard-info text-center">Escrever e enviar um email para todos os participantes.</div>
        </div>

        <div class="col-xs-3 bs-wizard-step" ng-class="{active: etapa==3, complete: etapa>3, disabled:etapa<3}">
            <div class="text-center bs-wizard-stepnum">Passo 4</div>
            <div class="progress"><div class="progress-bar"></div></div>
            <a href="" class="bs-wizard-dot"></a>
            <div class="bs-wizard-info text-center">Concluir criação do evento!</div>
        </div>
    </div>



</div>
                        <div class="row" ng-hide="etapa!=0">
                            <div class="col-sm-10 col-sm-offset-1">
                                <form class="form" ng-submit="cadastrarEvento()">
                                    <div class="form-group  col-sm-6">
                                        <label for="">Nome do evento</label>
                                        <input class="form-control" type="text" placeholder="Insira um nome" required/>
                                    </div>

                                    <div class="form-group col-sm-6">
                                        <label >Data do evento</label>

                                        <div class="input-group ">
                                            <input id="new-event" type="text" ng-model="dataNovoEvento" datepicker-popup="dd/MM/yyyy" is-open="opened" disabled class="form-control" placeholder="Data do Evento" required />
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-flat" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="">Categoria do evento</label>
                                        <select name="" id="" class="form-control" required>
                                            <option value="">Escolha a categoria</option>
                                            <option value="1">Escolha a categoria</option>

                                        </select>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="">Tipo de evento</label>
                                        <select name="" id="" class="form-control" required>
                                            <option value="">Escolha o tipo</option>
                                            <option value="1">Escolha a categoria</option>

                                        </select>
                                    </div>


                                    <div class="form-group">
                                        <br/>
                                        <button type="submit" class="btn btn-primary center-block">Criar evento</button>
                                    </div>

                                </form>
                            </div>
                        </div>




                        <div class="row" ng-hide="etapa!=1">
                            <div class="col-sm-10 col-sm-offset-1">
                                <form class="form" ng-submit="cadastrarEvento()">
                                    <div class="form-group  col-sm-6">
                                        <label for="">Nome do evento</label>
                                        <input class="form-control" type="text" placeholder="Insira um nome" required/>
                                    </div>

                                    <div class="form-group col-sm-6">
                                        <label >Data do evento</label>

                                        <div class="input-group ">
                                            <input id="new-event" type="text" ng-model="dataNovoEvento" datepicker-popup="dd/MM/yyyy" is-open="opened" disabled class="form-control" placeholder="Data do Evento" required />
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-flat" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="">Categoria do evento</label>
                                        <select name="" id="" class="form-control" required>
                                            <option value="">Escolha a categoria</option>
                                            <option value="1">Escolha a categoria</option>

                                        </select>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="">Tipo de evento</label>
                                        <select name="" id="" class="form-control" required>
                                            <option value="">Escolha o tipo</option>
                                            <option value="1">Escolha a categoria</option>

                                        </select>
                                    </div>


                                    <div class="form-group">
                                        <br/>
                                        <button type="submit" class="btn btn-primary center-block">Criar evento</button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>